<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item
    v-for="(item,index) in breadcrumbList"
    :key="index"
    >
      <span v-if="index === breadcrumbList.length-1" class="end">{{$t(`menus.${item.name}`)}}</span>
      <span v-else class="no-end" @click="changBreadcrub(item.path)">{{$t(`menus.${item.name}`)}}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { watch, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

// 点击实现路由跳转(注意跳转方法要写在watch上方)
const router = useRouter()
const changBreadcrub = (path) => {
  router.push(path)
}

const route = useRoute()
const breadcrumbList = ref([])
// 获取路由信息
const initbreadcrumbList = () => {
  breadcrumbList.value = route.matched
  console.log(route.matched)
}
// 监听路由对象变化
watch(route, () => {
  initbreadcrumbList()
}, { deep: true, immediate: true })

</script>

<style lang='scss' scoped>
.end{
  color: #97a8be;
  cursor: text;
}
.no-end{
  color: #666;
  font-weight: 600;
  cursor: pointer;
  &:hover{
    color: blue;
  }
}
</style>
